<template>
  <div>
    <div id="guage" style="width: 400px;height:400px;"></div>
    <button type="button" class="btn btn-success" @click="drawGuage">刷新</button>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      guageProperties: {}
    };
  },
  computed: {
    ...mapGetters(["getGuageChartProperties"])
  },
  methods: {
    setGuage() {
      this.guageProperties["series"][0]["name"] = "速度";
      this.guageProperties["series"][0]["min"] = 0;
      this.guageProperties["series"][0]["max"] = 14;
      this.guageProperties["series"][0]["splitNumber"] = 14;
      this.guageProperties["series"][0]["data"][0]["name"] = "PH";
    },
    drawGuage() {
      this.$axios.get("/getGuageChart/ph").then(response => {
        // 1.从vuex获取仪表盘的公共属性值
        this.guageProperties = this.getGuageChartProperties;
        // 2.单独设置仪表盘的某些属性值
        this.setGuage();
        this.guageProperties.series[0].data[0].value = JSON.parse(response.data).value;

        // 3.利用echarts绘制图表
        this.$echarts
          .init(document.getElementById("guage"))
          .setOption(this.guageProperties);
      });
    }
  },
  mounted: function() {
    this.drawGuage();
  }
};
</script>